<template>
  <view class="home">
    <!-- <block v-for="(item, index) in list" :key="index"> -->
    <view class="home-list">
      <!-- 头像 昵称 关注 -->
      <view class="home-list-top">
        <view class="home-l-t-left" @click="gotouse(item.user_id)">
          <!-- 头像 -->
          <image
            :src="item.userpic || '../../static/demo/datapic/10.jpg'"
            mode="aspectFill"
            style="width: 66rpx; height: 66rpx; border-radius: 100%"
            lazy-load
          ></image>
          <!-- 昵称时间 -->
          <view class="home-time">
            <view class=""> {{ item.username }} </view>
            <text> {{ item.newstime | time }} </text>
          </view>
        </view>
        <template v-if="follow">
          <view
            class="home-l-t-right"
            @click="Follow(item.user_id)"
            v-if="!isme"
          >
            <button v-if="!item.isFollow">关注</button>
            <!-- <button v-else>已关注</button> -->
          </view>
        </template>
      </view>
      <!-- 内容 -->
      <view class="home-list-c" @click="gotodetail">
        {{ item.title }}
      </view>
      <!-- 内容下面可能有图片 -->
      <slot>
        <view class="home-list-img" v-if="item.titlepic" @click="gotodetail">
          <image
            :src="item.titlepic"
            mode="aspectFill"
            style="width: 100%; border-radius: 15rpx"
            lazy-load
          ></image>
        </view>
      </slot>
      <!-- 点赞 踩 -->
      <view class="home-list-b">
        <view
          class="animated"
          hover-class="jello"
          :class="item.support.type === 'support' ? 'dianzanActive' : ''"
          @click="doSupport('support', item.id)"
        >
          <text class="iconfont icon-dianzan2"></text>
          <text>
            {{
              item.support.support_count > 0
                ? item.support.support_count
                : "点赞"
            }}
          </text>
        </view>
        <view
          class="animated"
          hover-class="jello"
          :class="item.support.type === 'unsupport' ? 'dianzanActive' : ''"
          @click="doSupport('unsupport', item.id)"
        >
          <text class="iconfont icon-cai"></text>
          <text>
            {{
              item.support.unsupport_count > 0
                ? item.support.unsupport_count
                : "踩他"
            }}
          </text>
        </view>
        <view class="">
          <text class="iconfont icon-pinglun2"></text>
          <text>
            {{ item.comment_count > 0 ? item.comment_count : "评论" }}
          </text>
        </view>
        <view class="">
          <text class="iconfont icon-zhuanfa1"></text>
          <text>
            {{ item.share_num > 0 ? item.share_num : "分享" }}
          </text>
        </view>
      </view>
    </view>
    <!-- </block> -->
  </view>
</template>
<script>
import { follow, support } from "@/api/api";
import $T from "@/common/time.js";
export default {
  // props: ["item", "index",],
  props: {
    item: Object,
    index: Number,
    isDetail: {
      type: Boolean,
      default: false,
    },
    follow: {
      type: Boolean,
      default: true,
    },
  },
  filters: {
    time(value) {
      return $T.gettime(value);
    },
  },
  computed: {
    isme() {
      if (this.$store.state.userInfo.userinfo) {
        return this.$store.state.userInfo.userinfo.user_id === this.item.user_id
          ? true
          : false;
      }
    },
  },
  methods: {
    //   点击头像或名称 跳转到个人中心
    gotouse(id) {
      console.log("点击了头像");
      if (this.$store.state.token) {
        uni.navigateTo({
          url: `/pages/user-space/user-space?userId=${id}`,
        });
      } else {
        uni.showToast({
          title: "请登录后操作",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/login/login`,
          });
        }, 500);
      }
    },
    //   点击内容或图片
    gotodetail() {
      if (this.isDetail) return;
      // console.log("点击了内容");
      console.log("点击了内容", this.item);
      let data = JSON.stringify(this.item);
      uni.navigateTo({
        url: "/pages/detail/detail?data=" + data,
      });
    },

    // 顶踩功能
    async doSupport(type, id) {
      if (!this.$store.state.token) {
        uni.showToast({
          title: "请登录后操作",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/login/login`,
          });
        }, 500);
        return;
      }

      console.log(type);
      // 发送请求
      support({
        post_id: this.item.id,
        type: type === "support" ? 0 : 1,
      }).then((res) => {
        // console.log(res);
        if (res.errorCode === 40000) {
          uni.showToast({ title: res.msg });
        } else {
          uni.showToast({ title: type === "support" ? "顶成功" : "踩成功" });
        }
      });
      uni.$emit("updateFollowOrSupport", {
        type: "support",
        data: {
          type: type,
          id: this.item.id,
        },
      });
    },
    // 关注
    async Follow(user_id) {
      if (!this.$store.state.token) {
        uni.showToast({
          title: "请登录后操作",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/login/login`,
          });
        }, 500);
        return;
      }
      let res = await follow({ follow_id: user_id });
      console.log(res);
      // this.$emit("follow", user_id);
      // this.checkAuth(() => {
      //   console.log("点击了关注");
      //   this.item.isFollow = true;
      // });
      // 通知父组件
      uni.$emit("updateFollowOrSupport", {
        type: "follow",
        user_id: user_id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@main-color: #fd597c;
.home {
  padding: 0 22rpx;
}
.home-list {
  //   width: 750rpx;
  height: 100%;
  margin: 20rpx 0;
}
.home-list-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-l-t-left {
  display: flex;
  .home-time {
    margin-left: 20rpx;
    view {
      font-size: 27rpx;
    }
    text {
      font-size: 20rpx;
      color: #b7b6b2;
    }
  }
}
.home-l-t-right {
  button {
    width: 110rpx;
    height: 50rpx;
    line-height: 50rpx;
    background-color: @main-color;
    color: #fff;
    font-size: 20rpx;
    border-radius: 15rpx;
  }
}
.home-list-b {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  view {
    text {
      margin-left: 15rpx;
    }
  }
}
.home-list-c {
  margin: 20rpx 0;
}
.dianzanActive {
  text {
    color: @main-color !important;
  }
}
</style>
